/* eslint-disable @typescript-eslint/no-non-null-assertion */
import { IWidgetDesc } from '@/config';
import { defineComponent, PropType, ref } from '@vue/composition-api';
import { Form, FormItem } from 'element-ui';

export default defineComponent({
  props: {
    movingWidgets: {
      type: Array as PropType<IWidgetDesc[]>,
      required: true,
    },
  },
  setup(props) {
    const widgetsDesc = ref<IWidgetDesc[]>([]);

    function handleDragenter(e: DragEvent) {
      e.dataTransfer!.dropEffect = 'move';
    }

    function handelDrop(e: DragEvent) {
      e.preventDefault();
      widgetsDesc.value.push(...props.movingWidgets);
      console.log(widgetsDesc.value, 'drop');
    }

    function handleDragover(e: DragEvent) {
      e.preventDefault();
    }
    return () => (
      <div
        class="df-panel"
        onDragenter={handleDragenter}
        onDragover={handleDragover}
        onDrop={handelDrop}
      >
        <Form>
          {widgetsDesc.value.map(item => {
            return (
              <FormItem label={item.label} draggable>
                {item.render()}
              </FormItem>
            );
          })}
        </Form>
      </div>
    );
  },
});
